<template>
  <div>
    <a-modal
      title="原料调剂"
      :visible="visible"
      okText="确定"
      cancelText="取消"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">原料名称</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiForm.productName"
              placeholder="原料名称"
              disabled
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">来自仓库</a-col>
          <a-col :span="20">
            <a-input
              v-model:value="apiForm.storehouseName"
              placeholder="来自仓库"
              disabled
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">调剂数量</a-col>
          <a-col :span="20">
            <a-input-number
              placeholder="调剂数量"
              :max="maxNum"
              v-model:value="apiForm.productNum"
            />
          </a-col>
        </a-row>

        <a-row
          type="flex"
          justify="space-around"
          align="middle"
          style="margin-bottom: 10px"
        >
          <a-col :span="4">调剂到仓库</a-col>
          <a-col :span="20">
            <a-radio-group
              name="radioGroup"
              :default-value="1"
              v-model:value="apiForm.toStorehouseId"
            >
              <a-radio
                :value="item.id"
                v-for="(item, index) in storehouseList"
                :key="index"
              >
                {{ item.srName }}
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { storeRefund ,storeTransfer} from '@/api/materials'

export default {
  data() {
    return {
      apiForm: {
        productId: null,
        productNum: 1,
        toStorehouseId: null, //调剂到某一个仓库
        formStorehouseId: null, //来自仓库
        productName: '', //原材料名称
        storehouseName: '', //仓库名称
      },
      maxNum: 0, //该原料库存
      confirmLoading: false,
      visible: false,
      // 可以调剂得仓库
      storehouseList: [],
    }
  },
  methods: {
    handleCancel(e) {
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      storeTransfer(this.apiForm)
        .then((res) => {
          this.$message.success('调剂成功')
          this.$parent.originalProduct()
          this.clearAll()
        })
        .catch((err) => {
          this.clearAll()
        })
    },
    clearAll() {
      this.visible = false
      this.confirmLoading = false
      this.apiForm = Object.assign({
        productId: null,
        productNum: 1,
        toStorehouseId: null, //调剂到某一个仓库
        formStorehouseId: null, //来自仓库
        productName: '', //原材料名称
        storehouseName: '', //仓库名称
      })
    },
  },
}
</script>